<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XSS Protection Test</title>
    <!-- Load the XSS protection script -->
    <script src="./src/local_deep_research/web/static/js/security/xss-protection.js"></script>
    <script>
        // Wait for XSS protection to load
        document.addEventListener('DOMContentLoaded', () => {
            // Test XSS protection functions
            if (!window.XSSProtection) {
                console.error('XSS protection not loaded!');
                return;
            }

            const { escapeHtml, sanitizeHtml, sanitizeUserInput } = window.XSSProtection;

            // Test cases
            const testCases = [
                '<script>alert("XSS")</script>',
                '<img src="x" onerror="alert(\'XSS\')">',
                '<iframe src="javascript:alert(\'XSS\')"></iframe>',
                '<div onclick="alert(\'XSS\')">Click me</div>',
                '<a href="javascript:alert(\'XSS\')">Link</a>',
                'Normal text <b>bold</b> and <i>italic</i>',
                '<div class="safe">Safe content</div>'
            ];

            console.log('Testing XSS Protection:');
            testCases.forEach((testCase, index) => {
                console.log(`\nTest ${index + 1}: ${testCase}`);
                console.log('escapeHtml:', escapeHtml(testCase));
                console.log('sanitizeHtml:', sanitizeHtml(testCase));
                console.log('sanitizeUserInput:', sanitizeUserInput(testCase));
            });

            // DOM test
            const testDiv = document.getElementById('test');
            const dangerousContent = '<script>alert("XSS Test")</script><b>Safe content</b>';

            // Test safeSetInnerHTML
            if (window.safeSetInnerHTML) {
                window.safeSetInnerHTML(testDiv, dangerousContent, true);
                console.log('DOM test completed - check if script executed (it should not)');
            }
        });
    </script>
</head>
<body>
    <h1>XSS Protection Test</h1>
    <p>Check browser console for test results.</p>
    <div id="test"></div>
</body>
</html>
